/**
 * 编辑页面离开提示
 * EditPageLeavePrompt
 */

import { MessageBox } from 'element-ui'

export default {
  methods: {
    // interface
    // 接口、获取当前是否已经编辑过的
    // getIsEdited() { }
    _beforeunloadHandler(event) {
      const isEdit = this.getIsEdited && this.getIsEdited()
      if (isEdit) {
        event.preventDefault()
        // Chrome requires returnValue to be set.
        event.returnValue = '您在页面编辑了未保存，是否确认离开'
        return '您在页面编辑了未保存，是否确认离开'
      }
    }
  },

  mounted() {
    if (process.env.NODE_ENV !== 'production') {
      if (typeof this.getIsEdited !== 'function') {
        console.warn('tips: 使用 EditPageLeavePrompt 要有 this.getIsEdited 方法')
      }
    }

    window.addEventListener('beforeunload', this._beforeunloadHandler)
  },

  beforeDestroy() {
    window.removeEventListener('beforeunload', this._beforeunloadHandler)
  },

  beforeRouteLeave(to, form, next) {
    const isEdit = this.getIsEdited && this.getIsEdited()

    if (isEdit) {
      // *** 此处必须要加延迟执行、不加的话点击浏览器按钮时会存在问题，弹框一闪而过，
      // 页面没有变，但是地址已经变了
      setTimeout(() => {
        MessageBox({
          title: '提示',
          message: `
            <div style="min-height: 50px; line-height: 22px;">
            <i class="el-icon-warning" style="color: rgb(90, 164, 255); font-size: 20px; vertical-align: middle;"></i>
            <span style="color: rgb(48, 49, 51);">您在页面编辑了未保存，是否确认离开</span>
          </div>
          `,
          showCancelButton: true,
          dangerouslyUseHTMLString: true,
          // type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
            // 正常跳转
            next()
          })
          .catch(() => {
            // 如果取消跳转地址栏会变化，这时保持地址栏不变
            next(false)
          })
      }, 100)
    } else {
      next()
    }
  }
}
